<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted} from 'vue'
import submitSuccessImg from "#/assets/images/pay/sumbit_success.png"
import payFailImg from "#/assets/images/pay/pay_fail.png"
import { type PayStep } from './const'

defineOptions({ name: 'CompleteOrder' })
const emit = defineEmits(['close'])

const props = defineProps<{
  steps: PayStep
}>()

const isSuccess = computed(() => props.steps.payStatus)

const img = computed(() => {
  return isSuccess.value ? submitSuccessImg : payFailImg
})

// 倒计时相关
const countdown = ref(20) // 20秒倒计时
let countdownTimer: NodeJS.Timeout | null| any = null

// 启动倒计时
const startCountdown = () => {
  if (countdownTimer) {
    clearInterval(countdownTimer)
  }
  countdownTimer = setInterval(() => {
    countdown.value--
    
    if (countdown.value <= 0) {
      // 倒计时结束，关闭窗口或执行其他操作
      clearInterval(countdownTimer)
      emit('close')
    }
  }, 1000)
}

// 组件挂载时启动倒计时（仅在支付成功时）
onMounted(() => {
  if (isSuccess.value) {
    startCountdown()
  }
})

// 组件卸载时清理定时器
onUnmounted(() => {
  if (countdownTimer) {
    clearInterval(countdownTimer)
  }
})

</script>

<template>
  <div class="complete-order-container flex flex-col items-center justify-center pt-16">
    <img :src="img" alt="complete-order" class="w-32 h-32 object-contain flex-shrink-0 mb-4" />
    <div v-if="isSuccess" class="text-center">
      <div class="text-[#30a46c] text-[20px] mb-2">支付成功</div>
      <span class="text-[#30a46c] text-[14px]">{{ countdown }}s</span>
      <span class="text-[#595959] text-[14px]">后将关闭本窗口</span>
    </div>
    <div v-else>
      <div class="text-[#e5484d] text-[20px] mb-2">支付失败</div>
      <div class="text-[#595959] text-[14px]">请返回订单重新支付</div>
    </div>
  </div>
</template>
